<template>
	<view class="settings-container">
		<!-- 页面头部 -->
		<view class="settings-header">
			<text class="page-title">设置</text>
			<text class="page-subtitle">个性化你的测试体验</text>
		</view>
		
		<!-- 设置分组 -->
		<view class="settings-sections">
			<!-- 通用设置 -->
			<view class="settings-section">
				<view class="section-header">
					<text class="section-title">通用设置</text>
					<view class="section-icon">⚙️</view>
				</view>
				<view class="settings-list">
					<view class="setting-item" @click="toggleTheme">
						<view class="setting-info">
							<text class="setting-name">深色模式</text>
							<text class="setting-desc">切换应用主题颜色</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.theme === 'dark' }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
					
					<view class="setting-item" @click="showLanguageSelector">
						<view class="setting-info">
							<text class="setting-name">语言</text>
							<text class="setting-desc">选择应用语言</text>
						</view>
						<view class="setting-control">
							<text class="setting-value">{{ getLanguageName(settings.language) }}</text>
							<text class="setting-arrow">›</text>
						</view>
					</view>
					
					<view class="setting-item" @click="toggleSound">
						<view class="setting-info">
							<text class="setting-name">音效</text>
							<text class="setting-desc">开启/关闭音效反馈</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.soundEnabled }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
					
					<view class="setting-item" @click="toggleVibration">
						<view class="setting-info">
							<text class="setting-name">震动反馈</text>
							<text class="setting-desc">开启/关闭震动反馈</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.vibrationEnabled }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 测试设置 -->
			<view class="settings-section">
				<view class="section-header">
					<text class="section-title">测试设置</text>
					<view class="section-icon">🧪</view>
				</view>
				<view class="settings-list">
					<view class="setting-item" @click="showDifficultySelector">
						<view class="setting-info">
							<text class="setting-name">默认难度</text>
							<text class="setting-desc">设置测试的默认难度</text>
						</view>
						<view class="setting-control">
							<text class="setting-value">{{ getDifficultyName(settings.defaultDifficulty) }}</text>
							<text class="setting-arrow">›</text>
						</view>
					</view>
					
					<view class="setting-item" @click="toggleAutoStart">
						<view class="setting-info">
							<text class="setting-name">自动开始</text>
							<text class="setting-desc">跳过说明直接开始测试</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.autoStart }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
					
					<view class="setting-item" @click="toggleShowHints">
						<view class="setting-info">
							<text class="setting-name">显示提示</text>
							<text class="setting-desc">在测试中显示操作提示</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.showHints }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
					
					<view class="setting-item" @click="showCountdownSelector">
						<view class="setting-info">
							<text class="setting-name">倒计时时长</text>
							<text class="setting-desc">测试开始前的倒计时</text>
						</view>
						<view class="setting-control">
							<text class="setting-value">{{ settings.countdownDuration }}秒</text>
							<text class="setting-arrow">›</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 通知设置 -->
			<view class="settings-section">
				<view class="section-header">
					<text class="section-title">通知设置</text>
					<view class="section-icon">🔔</view>
				</view>
				<view class="settings-list">
					<view class="setting-item" @click="toggleDailyReminder">
						<view class="setting-info">
							<text class="setting-name">每日提醒</text>
							<text class="setting-desc">提醒你进行每日测试</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.dailyReminder }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
					
					<view class="setting-item" @click="showReminderTimeSelector" v-if="settings.dailyReminder">
						<view class="setting-info">
							<text class="setting-name">提醒时间</text>
							<text class="setting-desc">设置每日提醒时间</text>
						</view>
						<view class="setting-control">
							<text class="setting-value">{{ settings.reminderTime }}</text>
							<text class="setting-arrow">›</text>
						</view>
					</view>
					
					<view class="setting-item" @click="toggleAchievementNotifications">
						<view class="setting-info">
							<text class="setting-name">成就通知</text>
							<text class="setting-desc">解锁成就时显示通知</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.achievementNotifications }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 隐私设置 -->
			<view class="settings-section">
				<view class="section-header">
					<text class="section-title">隐私设置</text>
					<view class="section-icon">🔒</view>
				</view>
				<view class="settings-list">
					<view class="setting-item" @click="toggleDataCollection">
						<view class="setting-info">
							<text class="setting-name">数据收集</text>
							<text class="setting-desc">允许收集匿名使用数据</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.dataCollection }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
					
					<view class="setting-item" @click="toggleShareResults">
						<view class="setting-info">
							<text class="setting-name">分享结果</text>
							<text class="setting-desc">允许在排行榜中显示结果</text>
						</view>
						<view class="setting-control">
							<view :class="['toggle-switch', { active: settings.shareResults }]">
								<view class="toggle-thumb"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 数据管理 -->
			<view class="settings-section">
				<view class="section-header">
					<text class="section-title">数据管理</text>
					<view class="section-icon">💾</view>
				</view>
				<view class="settings-list">
					<view class="setting-item" @click="exportSettings">
						<view class="setting-info">
							<text class="setting-name">导出设置</text>
							<text class="setting-desc">备份当前设置配置</text>
						</view>
						<view class="setting-control">
							<text class="setting-arrow">›</text>
						</view>
					</view>
					
					<view class="setting-item" @click="importSettings">
						<view class="setting-info">
							<text class="setting-name">导入设置</text>
							<text class="setting-desc">从备份恢复设置</text>
						</view>
						<view class="setting-control">
							<text class="setting-arrow">›</text>
						</view>
					</view>
					
					<view class="setting-item" @click="resetSettings">
						<view class="setting-info">
							<text class="setting-name">重置设置</text>
							<text class="setting-desc">恢复所有设置到默认值</text>
						</view>
						<view class="setting-control">
							<text class="setting-arrow">›</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 关于 -->
			<view class="settings-section">
				<view class="section-header">
					<text class="section-title">关于</text>
					<view class="section-icon">ℹ️</view>
				</view>
				<view class="settings-list">
					<view class="setting-item" @click="showAbout">
						<view class="setting-info">
							<text class="setting-name">应用版本</text>
							<text class="setting-desc">查看版本信息和更新日志</text>
						</view>
						<view class="setting-control">
							<text class="setting-value">v1.0.0</text>
							<text class="setting-arrow">›</text>
						</view>
					</view>
					
					<view class="setting-item" @click="showFeedback">
						<view class="setting-info">
							<text class="setting-name">意见反馈</text>
							<text class="setting-desc">提交建议或报告问题</text>
						</view>
						<view class="setting-control">
							<text class="setting-arrow">›</text>
						</view>
					</view>
					
					<view class="setting-item" @click="showPrivacyPolicy">
						<view class="setting-info">
							<text class="setting-name">隐私政策</text>
							<text class="setting-desc">查看隐私政策和用户协议</text>
						</view>
						<view class="setting-control">
							<text class="setting-arrow">›</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 选择器弹窗 -->
		<view class="modal-overlay" v-if="showModal" @click="hideModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">{{ modalTitle }}</text>
					<view class="modal-close" @click="hideModal">×</view>
				</view>
				<view class="modal-body">
					<view class="option-list">
						<view 
							v-for="option in modalOptions" 
							:key="option.value"
							:class="['option-item', { active: option.value === modalSelectedValue }]"
							@click="selectOption(option.value)"
						>
							<text class="option-text">{{ option.label }}</text>
							<view class="option-check" v-if="option.value === modalSelectedValue">✓</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 确认弹窗 -->
		<view class="modal-overlay" v-if="showConfirmModal" @click="hideConfirmModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">{{ confirmTitle }}</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">{{ confirmMessage }}</text>
				</view>
				<view class="modal-actions">
					<button class="modal-btn cancel" @click="hideConfirmModal">取消</button>
					<button class="modal-btn confirm" @click="confirmAction">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSettings, saveSettings, resetSettings as resetAllSettings, exportSettings as exportAllSettings, importSettings as importAllSettings } from '../../utils/settingsManager.js'

// 响应式数据
const settings = ref({})
const showModal = ref(false)
const showConfirmModal = ref(false)
const modalTitle = ref('')
const modalOptions = ref([])
const modalSelectedValue = ref('')
const modalType = ref('')
const confirmTitle = ref('')
const confirmMessage = ref('')
const confirmCallback = ref(null)

// 页面加载时初始化设置
onMounted(() => {
	loadSettings()
})

// 加载设置
const loadSettings = () => {
	settings.value = getSettings()
}

// 保存设置
const saveCurrentSettings = () => {
	saveSettings(settings.value)
	uni.showToast({
		title: '设置已保存',
		icon: 'success',
		duration: 1500
	})
}

// 切换主题
const toggleTheme = () => {
	settings.value.theme = settings.value.theme === 'light' ? 'dark' : 'light'
	saveCurrentSettings()
}

// 切换音效
const toggleSound = () => {
	settings.value.soundEnabled = !settings.value.soundEnabled
	saveCurrentSettings()
}

// 切换震动
const toggleVibration = () => {
	settings.value.vibrationEnabled = !settings.value.vibrationEnabled
	saveCurrentSettings()
}

// 切换自动开始
const toggleAutoStart = () => {
	settings.value.autoStart = !settings.value.autoStart
	saveCurrentSettings()
}

// 切换显示提示
const toggleShowHints = () => {
	settings.value.showHints = !settings.value.showHints
	saveCurrentSettings()
}

// 切换每日提醒
const toggleDailyReminder = () => {
	settings.value.dailyReminder = !settings.value.dailyReminder
	saveCurrentSettings()
}

// 切换成就通知
const toggleAchievementNotifications = () => {
	settings.value.achievementNotifications = !settings.value.achievementNotifications
	saveCurrentSettings()
}

// 切换数据收集
const toggleDataCollection = () => {
	settings.value.dataCollection = !settings.value.dataCollection
	saveCurrentSettings()
}

// 切换分享结果
const toggleShareResults = () => {
	settings.value.shareResults = !settings.value.shareResults
	saveCurrentSettings()
}

// 显示语言选择器
const showLanguageSelector = () => {
	modalTitle.value = '选择语言'
	modalType.value = 'language'
	modalSelectedValue.value = settings.value.language
	modalOptions.value = [
		{ value: 'zh-CN', label: '简体中文' },
		{ value: 'zh-TW', label: '繁體中文' },
		{ value: 'en', label: 'English' },
		{ value: 'ja', label: '日本語' },
		{ value: 'ko', label: '한국어' }
	]
	showModal.value = true
}

// 显示难度选择器
const showDifficultySelector = () => {
	modalTitle.value = '选择默认难度'
	modalType.value = 'difficulty'
	modalSelectedValue.value = settings.value.defaultDifficulty
	modalOptions.value = [
		{ value: 'easy', label: '简单' },
		{ value: 'medium', label: '中等' },
		{ value: 'hard', label: '困难' }
	]
	showModal.value = true
}

// 显示倒计时选择器
const showCountdownSelector = () => {
	modalTitle.value = '选择倒计时时长'
	modalType.value = 'countdown'
	modalSelectedValue.value = settings.value.countdownDuration
	modalOptions.value = [
		{ value: 1, label: '1秒' },
		{ value: 2, label: '2秒' },
		{ value: 3, label: '3秒' },
		{ value: 5, label: '5秒' }
	]
	showModal.value = true
}

// 显示提醒时间选择器
const showReminderTimeSelector = () => {
	modalTitle.value = '选择提醒时间'
	modalType.value = 'reminderTime'
	modalSelectedValue.value = settings.value.reminderTime
	modalOptions.value = [
		{ value: '08:00', label: '上午 8:00' },
		{ value: '12:00', label: '中午 12:00' },
		{ value: '18:00', label: '下午 6:00' },
		{ value: '20:00', label: '晚上 8:00' },
		{ value: '21:00', label: '晚上 9:00' }
	]
	showModal.value = true
}

// 选择选项
const selectOption = (value) => {
	switch (modalType.value) {
		case 'language':
			settings.value.language = value
			break
		case 'difficulty':
			settings.value.defaultDifficulty = value
			break
		case 'countdown':
			settings.value.countdownDuration = value
			break
		case 'reminderTime':
			settings.value.reminderTime = value
			break
	}
	saveCurrentSettings()
	hideModal()
}

// 隐藏模态框
const hideModal = () => {
	showModal.value = false
	modalType.value = ''
}

// 显示确认弹窗
const showConfirm = (title, message, callback) => {
	confirmTitle.value = title
	confirmMessage.value = message
	confirmCallback.value = callback
	showConfirmModal.value = true
}

// 隐藏确认弹窗
const hideConfirmModal = () => {
	showConfirmModal.value = false
	confirmCallback.value = null
}

// 确认操作
const confirmAction = () => {
	if (confirmCallback.value) {
		confirmCallback.value()
	}
	hideConfirmModal()
}

// 获取语言名称
const getLanguageName = (language) => {
	const languages = {
		'zh-CN': '简体中文',
		'zh-TW': '繁體中文',
		'en': 'English',
		'ja': '日本語',
		'ko': '한국어'
	}
	return languages[language] || '简体中文'
}

// 获取难度名称
const getDifficultyName = (difficulty) => {
	const difficulties = {
		'easy': '简单',
		'medium': '中等',
		'hard': '困难'
	}
	return difficulties[difficulty] || '中等'
}

// 导出设置
const exportSettings = () => {
	try {
		const exported = exportAllSettings()
		uni.showToast({
			title: '设置导出成功',
			icon: 'success'
		})
		// 这里可以实现实际的文件导出逻辑
	} catch (error) {
		uni.showToast({
			title: '导出失败',
			icon: 'error'
		})
	}
}

// 导入设置
const importSettings = () => {
	uni.showToast({
		title: '导入功能开发中',
		icon: 'none'
	})
}

// 重置设置
const resetSettings = () => {
	showConfirm(
		'重置设置',
		'确定要将所有设置恢复到默认值吗？此操作无法撤销。',
		() => {
			resetAllSettings()
			loadSettings()
			uni.showToast({
				title: '设置已重置',
				icon: 'success'
			})
		}
	)
}

// 显示关于信息
const showAbout = () => {
	uni.showModal({
		title: '关于脑力魔方',
		content: '版本: v1.0.0\n\n一款专业的认知能力测试应用，帮助你了解和提升大脑各项能力。\n\n© 2024 脑力魔方团队',
		showCancel: false
	})
}

// 显示反馈
const showFeedback = () => {
	uni.showToast({
		title: '反馈功能开发中',
		icon: 'none'
	})
}

// 显示隐私政策
const showPrivacyPolicy = () => {
	uni.showToast({
		title: '隐私政策功能开发中',
		icon: 'none'
	})
}
</script>

<style lang="scss" scoped>
.settings-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx 0;
}

.settings-header {
	text-align: center;
	padding: 0 30rpx 40rpx;
	color: white;
	
	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.page-subtitle {
		font-size: 28rpx;
		opacity: 0.8;
		display: block;
	}
}

.settings-sections {
	padding: 0 30rpx;
}

.settings-section {
	margin-bottom: 40rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: white;
		}
		
		.section-icon {
			font-size: 36rpx;
		}
	}
	
	.settings-list {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		overflow: hidden;
		
		.setting-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
			transition: background-color 0.3s ease;
			
			&:last-child {
				border-bottom: none;
			}
			
			&:active {
				background: rgba(255, 255, 255, 0.1);
			}
			
			.setting-info {
				flex: 1;
				
				.setting-name {
					font-size: 30rpx;
					color: white;
					display: block;
					margin-bottom: 8rpx;
					font-weight: 500;
				}
				
				.setting-desc {
					font-size: 24rpx;
					color: white;
					opacity: 0.7;
					line-height: 1.4;
				}
			}
			
			.setting-control {
				display: flex;
				align-items: center;
				gap: 15rpx;
				
				.setting-value {
					font-size: 26rpx;
					color: white;
					opacity: 0.8;
				}
				
				.setting-arrow {
					font-size: 32rpx;
					color: white;
					opacity: 0.5;
				}
				
				.toggle-switch {
					width: 80rpx;
					height: 44rpx;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 22rpx;
					position: relative;
					transition: all 0.3s ease;
					
					&.active {
						background: #4CAF50;
						
						.toggle-thumb {
							transform: translateX(36rpx);
						}
					}
					
					.toggle-thumb {
						width: 36rpx;
						height: 36rpx;
						background: white;
						border-radius: 50%;
						position: absolute;
						top: 4rpx;
						left: 4rpx;
						transition: transform 0.3s ease;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	
	.modal-content {
		background: white;
		border-radius: 20rpx;
		margin: 40rpx;
		max-width: 600rpx;
		width: 100%;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		
		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 40rpx 20rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			.modal-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
			
			.modal-close {
				font-size: 48rpx;
				color: #999;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				transition: all 0.3s ease;
				
				&:active {
					background: #f0f0f0;
				}
			}
		}
		
		.modal-body {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx 0;
			
			.modal-text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				text-align: center;
				padding: 20rpx 40rpx;
			}
			
			.option-list {
				.option-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 25rpx 40rpx;
					border-bottom: 1rpx solid #f0f0f0;
					transition: background-color 0.3s ease;
					
					&:last-child {
						border-bottom: none;
					}
					
					&:active {
						background: #f8f8f8;
					}
					
					&.active {
						background: #e3f2fd;
						
						.option-text {
							color: #2196F3;
							font-weight: bold;
						}
					}
					
					.option-text {
						font-size: 30rpx;
						color: #333;
					}
					
					.option-check {
						font-size: 32rpx;
						color: #2196F3;
						font-weight: bold;
					}
				}
			}
		}
		
		.modal-actions {
			display: flex;
			gap: 20rpx;
			padding: 20rpx 40rpx 40rpx;
			border-top: 1rpx solid #f0f0f0;
			
			.modal-btn {
				flex: 1;
				padding: 25rpx;
				border-radius: 15rpx;
				border: none;
				font-size: 28rpx;
				font-weight: bold;
				transition: all 0.3s ease;
				
				&.cancel {
					background: #f5f5f5;
					color: #666;
					
					&:active {
						background: #e0e0e0;
					}
				}
				
				&.confirm {
					background: #2196F3;
					color: white;
					
					&:active {
						background: #1976D2;
					}
				}
			}
		}
	}
}
</style>